<template>
  <div class="cml-base-more">
    <button class="cml-base-more-btn"
      :class="{'active': isActive}"
      @click="change">
      <svg class="cml-base-more-icon"
        width="20px"
        height="20px"
        viewBox="0 0 18 18">
        <path class="icon-path"
          d="M2,7A2,2,0,1,0,4,9,2,2,0,0,0,2,7ZM9,7a2,2,0,1,0,2,2A2,2,0,0,0,9,7Zm7,0a2,2,0,1,0,2,2A2,2,0,0,0,16,7Z" />
      </svg>
    </button>
  </div>
</template>
<script>

export default {
  name: 'BaseMore',
  components: {},
  model: {},
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    change() {
      this.$emit('change')
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../style/panel-var.scss';

.cml-base-more {
  display: flex;
  justify-content: center;
  align-items: center;
}
.cml-base-more-btn {
  color: $text-color;
  opacity: 0.6;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  display: flex;
  cursor: pointer;
  &:hover, &:focus {
    color: $text-active-color;
    // opacity: 0.8;
  }
  &.active {
    color: $text-active-color;
    // opacity: 0.8;
  }
  .cml-base-more-icon {
    /* width: 100%;
    height: 100%; */
    .icon-path {
      transition: all ease 0.2s;
      fill: currentColor;
    }
  }
}
</style>
